<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue';
import VideoRoom from './components/VideoRoom.vue';
import JoinRoom from './components/JoinRoom.vue';

interface JoinRoomData {
  roomId: string;
  userId?: string;
}

const roomId = ref<string>('');
const userId = ref<string>('');
const isInRoom = ref<boolean>(false);

function handleJoinRoom(data: JoinRoomData): void {
  roomId.value = data.roomId;
  userId.value = data.userId || `user-${Math.floor(Math.random() * 1000000)}`;
  isInRoom.value = true;
}

function handleLeaveRoom(): void {
  roomId.value = '';
  isInRoom.value = false;
}
</script>

<template>
  <div class="app-container">
    <h1 class="app-title">WebRTC视频通话应用</h1>
    
    <template v-if="!isInRoom">
      <JoinRoom @join-room="handleJoinRoom" />
    </template>
    
    <template v-else>
      <VideoRoom 
        :roomId="roomId" 
        :userId="userId" 
        @leave-room="handleLeaveRoom" 
      />
    </template>
  </div>
</template>

<style>
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #f0f2f5;
  color: #000;
}

.app-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.app-title {
  text-align: center;
  color: #333;
  margin-bottom: 30px;
}
</style>
